<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="nav-title">会员信息</text>
      <button class="query-btn" @click="handleQuery">查询</button>
    </view>

    <!-- 会员信息区域 -->
    <view class="member-info">
      <view class="info-item">
        <text class="info-label">姓名：</text>
        <text class="info-value">{{ memberName }}</text>
      </view>
    </view>

    <!-- 票号添加区域 -->
    <view class="ticket-input-section">
      <view class="input-group">
        <input 
          type="text" 
          v-model="ticketNumber" 
          placeholder="输入票号" 
          class="ticket-input"
        />
        <button class="add-btn" @click="addTicket">添加</button>
      </view>

      <button 
        class="scan-btn" 
        @click="scanTicket"
        :loading="isScanning"
      >
        <text class="scan-icon">📷</text>
        扫码添加
      </button>
    </view>

    <!-- 票号列表区域 -->
    <view class="ticket-list-section">
      <text class="list-title">票号列表</text>
      
      <!-- 列表表头 -->
      <view class="list-header">
        <text class="header-item">票号</text>
        <text class="header-item">类型</text>
        <text class="header-item">数量</text>
      </view>
      
      <!-- 列表内容 -->
      <view class="list-content">
        <view 
          class="ticket-item" 
          v-for="(item, index) in ticketList" 
          :key="index"
          :animation="item.animationData"
        >
          <text class="item-cell">{{ item.number }}</text>
          <text class="item-cell">{{ item.type }}</text>
          <text class="item-cell">{{ item.quantity }}</text>
        </view>
        
        <!-- 空状态提示 -->
        <view class="empty-state" v-if="ticketList.length === 0">
          <text>暂无票号信息</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-btn-container">
      <button 
        class="confirm-btn" 
        @click="confirmDeposit"
        :disabled="ticketList.length === 0"
      >
        确定存票
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      memberName: "张三",
      ticketNumber: "",
      ticketList: [
        { number: "124546", type: "预存款", quantity: 150 },
        { number: "124546", type: "游戏币", quantity: 80 },
        { number: "124546", type: "游乐币", quantity: 300 },
        { number: "124546", type: "彩票", quantity: 1000 },
        { number: "124546", type: "积分", quantity: 800 }
      ],
      isScanning: false
    };
  },
  onLoad() {
    // 初始化时为列表项添加动画
    this.initAnimations();
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.ticketDeposit')
  	});
  },
  methods: {
    // 初始化列表项动画
    initAnimations() {
      this.ticketList.forEach((item, index) => {
        setTimeout(() => {
          const animation = uni.createAnimation({
            duration: 300,
            timingFunction: "ease-out"
          });
          animation.opacity(1).translateY(0).step();
          this.$set(this.ticketList[index], "animationData", animation.export());
        }, index * 50);
      });
    },
    
    // 处理查询
    handleQuery() {
      uni.showToast({
        title: "查询功能待实现",
        icon: "none"
      });
    },
    
    // 添加票号
    addTicket() {
      if (!this.ticketNumber.trim()) {
        uni.showToast({
          title: "请输入票号",
          icon: "none"
        });
        return;
      }
      
      // 这里仅做示例，实际应用中需要根据票号获取详细信息
      const newTicket = {
        number: this.ticketNumber,
        type: "未知类型",
        quantity: 0,
        animationData: {}
      };
      
      // 添加入场动画
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: "ease-out"
      });
      animation.opacity(0).translateY(20).step();
      newTicket.animationData = animation.export();
      
      this.ticketList.unshift(newTicket);
      this.ticketNumber = "";
      
      // 触发动画
      setTimeout(() => {
        const animation = uni.createAnimation({
          duration: 300,
          timingFunction: "ease-out"
        });
        animation.opacity(1).translateY(0).step();
        this.$set(this.ticketList, 0, {
          ...this.ticketList[0],
          animationData: animation.export()
        });
      }, 10);
      
      uni.showToast({
        title: "票号添加成功",
        icon: "success"
      });
    },
    
    // 扫码添加票号
    scanTicket() {
      this.isScanning = true;
      
      // 调用UniApp扫码API
      uni.scanCode({
        success: (res) => {
          this.ticketNumber = res.result;
          this.addTicket();
        },
        fail: (err) => {
          console.error("扫码失败", err);
          uni.showToast({
            title: "扫码失败，请重试",
            icon: "none"
          });
        },
        complete: () => {
          this.isScanning = false;
        }
      });
    },
    
    // 确定存票
    confirmDeposit() {
      if (this.ticketList.length === 0) return;
      
      // 显示加载提示
      uni.showLoading({
        title: "处理中..."
      });
      
      // 模拟存票操作
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: "成功",
          content: "存票操作已完成",
          showCancel: false,
          success: () => {
            // 清空列表
            this.ticketList = [];
          }
        });
      }, 1500);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.query-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.query-btn:hover {
  background-color: #f5222d;
}

/* 会员信息样式 */
.member-info {
  padding: 16px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  color: #666;
  font-size: 16px;
  margin-right: 8px;
}

.info-value {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

/* 票号输入区域样式 */
.ticket-input-section {
  padding: 16px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.ticket-input {
  flex: 1;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.ticket-input:focus {
  border-color: #ff7a45;
  outline: none;
}

.add-btn {
  background-color: #ff7a45;
  color: white;
  border: none;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background-color: #fa541c;
}

.scan-btn {
  width: 100%;
  height: 50px;
  background-color: #ff9a2e;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s, transform 0.2s;
}

.scan-btn:active {
  transform: scale(0.98);
}

.scan-btn:hover {
  background-color: #fa8c16;
}

.scan-icon {
  font-size: 20px;
}

/* 票号列表区域样式 */
.ticket-list-section {
  flex: 1;
  background-color: #ffffff;
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.list-title {
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}

.list-header {
  display: flex;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.header-item {
  flex: 1;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.list-content {
  flex: 1;
  overflow-y: auto;
}

.ticket-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s;
}

.ticket-item:last-child {
  border-bottom: none;
}

.ticket-item:hover {
  background-color: #f5f5f5;
}

.item-cell {
  flex: 1;
  font-size: 14px;
  color: #333;
  text-align: center;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  color: #999;
  font-size: 14px;
}

/* 底部按钮样式 */
.bottom-btn-container {
  padding: 16px;
  background-color: #f5f5f5;
}

.confirm-btn {
  width: 100%;
  height: 50px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s, transform 0.2s, opacity 0.3s;
}

.confirm-btn:active {
  transform: scale(0.98);
}

.confirm-btn:hover {
  background-color: #f5222d;
}

.confirm-btn:disabled {
  background-color: #ffcccc;
  cursor: not-allowed;
  opacity: 0.7;
}
</style>